<template>
    <a-list :data-source="articles" :loading="loading" class="gutter-box" item-layout="vertical" size="large">
        <div
                :style="{ textAlign: 'center', marginTop: '12px', height: '32px', lineHeight: '32px' }"
                slot="loadMore"
                v-if="showLoadingMore"
        >
            <a-spin v-if="loadingMore"/>
            <a-button @click="onLoadMore" class="loadmore-btn" v-else>
                阅读更多
            </a-button>
        </div>
        <a-list-item key="item.title" slot="renderItem" slot-scope="item">
            <img
                    alt="logo"
                    slot="extra"
                    src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"
                    width="172"
            />
            <a-list-item-meta>
                <router-link :to="'/article/' + item.id" slot="title">{{ item.title }}</router-link>
                <!--                        <a-avatar :src="item.avatar" slot="avatar"/>-->
            </a-list-item-meta>
            <span class="description">{{ item.description }}</span>
        </a-list-item>
    </a-list>
</template>

<script>
    import {Button, List, Spin} from "ant-design-vue";
    import axios from "axios";

    export default {
        name: "Search",
        components: {
            AList: List,
            AListItem: List.Item,
            AListItemMeta: List.Item.Meta,
            AButton: Button,
            ASpin: Spin
        },
        data() {
            return {
                articles: [],
                loading: true,
                loadingMore: false,
                showLoadingMore: false,
                failedLoading: false,
                page: 1,  // 当前请求文章的页数
                per_page: 10  // 每一页显示多少
            }
        },
        mounted() {
            this.$emit('changePaths', [{link: '/', name: '首页'}, {link: '', name: '搜索'}]);
            this.loadArticle();
        },
        methods: {
            onLoadMore() {
                this.loadingMore = true;
                axios.get("/article/", {
                    params: {
                        page: this.page,
                        per_page: this.per_page
                    }
                }).then(response => {
                    let data = response.data;
                    this.articles = this.articles.concat(data.data);
                    this.showLoadingMore = data.has_next;
                    this.loadingMore = false;
                    this.page++;
                    this.$nextTick(() => {
                        window.dispatchEvent(new Event('resize'));
                    });
                });
            },
            loadArticle() {
                axios.get("/article/", {params: {q: this.$route.query.q}}).then(response => {
                    let data = response.data;
                    this.articles = data.data;
                    this.loading = false;
                    this.showLoadingMore = data.has_next;
                    this.page++;  // 加载成功后加页数，否则不加
                }).catch(function () {
                    this.failedLoading = true;
                    this.loading = false;
                })
            }
        },
        watch: {
            // 监听路由params变化
            $route() {
                this.loadArticle();
            }
        }
    }
</script>

<style scoped>
    >>> .ant-list-item-meta-title > a {
        vertical-align: middle;
    }

    .loadmore-btn {
        width: 20rem;
        border-radius: 24px;
        height: 3em;
        letter-spacing: 2em;
        text-indent: 1em;
    }

    .description {
        word-wrap: break-word;
        word-break: break-all;
    }
</style>